<template>
  <BasicDrawer v-bind="$attrs" @register="registerDrawer" title="支付接口配置列表" :width="width">
    <BasicTable @register="registerTable" :rowClassName="getRowClassName">
      <template #tableTitle>
        <a-button type="primary" @click="selectAddPayIfDefine">添加支付接口</a-button>
      </template>
      <template #action="{ record }">
        <TableAction :actions="getTableAction(record)" />
      </template>
    </BasicTable>
  </BasicDrawer>
  <PayIfDefineSelectModal rowKey="id" @register="registerSelPayIfDefineModal" @get-select-result="onSelectPayIfDefineOk" />
  <PayIfConfigDrawer @register="registerPayIfConfigDrawer" @success="reload" @go-pay-way="handlePayPassage" />
  <PayPassageListDrawer @register="registerPayPassageDrawer" />
</template>
<script lang="ts" setup>
  import { ref, unref } from "vue"
  import { BasicDrawer, useDrawerInner } from "/@/components/Drawer"
  import { BasicTable, useTable, TableAction } from "/@/components/Table"
  import { useModal } from "/@/components/Modal"
  import { useDrawer } from "/@/components/Drawer"
  import { useDesign } from "/@/hooks/web/useDesign"
  import PayIfDefineSelectModal from "./PayIfDefineSelectModal.vue"
  import PayIfConfigDrawer from "./PayIfConfigDrawer.vue"
  import PayPassageListDrawer from "./PayPassageListDrawer.vue"
  import { columns } from "./payIfConfig.data"
  import { listPayConfig, deletePayConfig, addPayIf } from "./payIfConfig.api"
  import { getMchInfo } from "/@/api/pay"

  const [registerSelPayIfDefineModal, selPayIfDefineModal] = useModal()
  const [registerPayIfConfigDrawer, { openDrawer: openPayIfConfigDrawer }] = useDrawer()
  const [registerPayPassageDrawer, { openDrawer: openPayPassageDrawer }] = useDrawer()

  const { prefixCls } = useDesign("row-invalid")
  const appId = ref("")
  const mchApp = ref<any>({})
  const mchInfo = ref<any>({})
  const width = ref<number | string>("800px")
  const [registerDrawer, { setDrawerProps }] = useDrawerInner(async (data) => {
    setDrawerProps({ loading: true })
    try {
      appId.value = data.mchApp.id
      mchApp.value = data.mchApp
      mchInfo.value = await getMchInfo({ mchNo: data.mchApp.mchNo })
      setProps({ searchInfo: { appId: unref(appId) } })
      reload()
    } catch (e) {
      console.error(e)
    } finally {
      setDrawerProps({ loading: false })
    }
  })

  const [registerTable, { reload, setProps }] = useTable({
    api: listPayConfig,
    columns: columns,
    rowKey: "id",
    striped: true,
    useSearchForm: false,
    bordered: false,
    showIndexColumn: false,
    canResize: false,
    immediate: false,
    actionColumn: {
      width: 100,
      title: "操作",
      dataIndex: "action",
      slots: { customRender: "action" },
      fixed: undefined,
    },
  })

  // 选择添加
  function selectAddPayIfDefine() {
    selPayIfDefineModal.openModal()
  }

  function handleEdit(record) {
    openPayIfConfigDrawer(true, {
      payIfConfig: record,
      mchApp: mchApp.value,
      mchInfo: mchInfo.value,
      isUpdate: true,
    })
  }

  /**
   * 支付方式
   */
  function handlePayPassage(record) {
    openPayPassageDrawer(true, {
      record: {
        payConfig: record,
        mchApp: mchApp.value,
      },
      isUpdate: true,
    })
  }

  async function handleDelete(record) {
    await deletePayConfig({ id: record.id }, reload)
  }

  function getTableAction(record) {
    return [
      {
        label: "支付通道",
        onClick: handlePayPassage.bind(null, record),
      },
      {
        label: "编辑",
        onClick: handleEdit.bind(null, record),
      },
      {
        label: "删除",
        popConfirm: {
          title: "是否确认删除",
          confirm: handleDelete.bind(null, record),
        },
      },
    ]
  }
  function getRowClassName(record) {
    return record.status > 1 ? prefixCls : ""
  }

  // 选择用户成功
  async function onSelectPayIfDefineOk(options, idList) {
    if (idList.length > 0) {
      try {
        console.log("idList: ", idList)
        await addPayIf({ ifDefineIds: idList, appId: appId.value })
        reload()
      } finally {
        // setLoading(false)
      }
    }
  }
</script>
<style scoped lang="less">
  @prefix-cls: ~"@{namespace}-row-invalid";

  :deep(.@{prefix-cls}) {
    background: #f4f4f4;
    color: #bababa;
  }
</style>
